<template>
  <div class="goods-add">

    <!--步骤条-->
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤1" description="基本信息"></el-step>
      <el-step title="步骤2" description="商品图片"></el-step>
      <el-step title="步骤3" description="商品内容"></el-step>
    </el-steps>

    <!--tab栏-->
    <br>
    <el-tabs @tab-click="handleClick" v-model="activeName" tab-position="left">

      <el-tab-pane label="基本信息" name="one0">
        <el-form :rules="rules" ref="form" :model="form" label-width="80px">

          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name" placeholder="请输入商品名称"></el-input>
          </el-form-item>

          <el-form-item label="商品价格" prop="goods_price">
            <el-input  v-model="form.goods_price" placeholder="请输入商品价格"></el-input>
          </el-form-item>

          <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="form.goods_weight" placeholder="请输入商品重量"></el-input>
          </el-form-item>

          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="form.goods_number" placeholder="请输入商品数量"></el-input>
          </el-form-item>

          <el-form-item label="商品分类">
            <el-cascader
              v-model="form.goods_cat"
              :options="options"
              :props="props">
            </el-cascader>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="next">下一步</el-button>
          </el-form-item>

        </el-form>
      </el-tab-pane>

      <el-tab-pane label="商品图片" name="one1">
        <!--action: 上传图片的地址-->
        <!--name: 图片上传后台需要的name-->
        <!--headers: 请求头-->
        <el-upload
          :action="action"
          :headers="headers"
          multiple
          name="file"
          list-type="picture-card"
          :on-success="handleSucces"
          :before-upload="handleBefore"
          :on-remove="handleRemove"
          :on-preview="handlePictureCardPreview">

          <i class="el-icon-plus"></i>
        </el-upload>
        <br>
        <el-button type="primary" @click="next">下一步</el-button>
      </el-tab-pane>

      <el-tab-pane label="商品内容" name="one2">
        <quill-editor v-model="form.goods_introduce"></quill-editor>
        <br>
        <el-button type="primary" @click="addNext">完成</el-button>
      </el-tab-pane>

      <!--放大图片-->
      <el-dialog :visible.sync="dialogVisible" width="40%">
        <img style="width: 100%" :src="imgUrl" alt="">
      </el-dialog>

    </el-tabs>
  </div>
</template>

<script>
export default {
  computed: {
    action () {
      return this.$axios.defaults.baseURL + 'upload'
    }
  },
  data () {
    return {
      // 激活的步骤条的下标
      active: 0,
      // 激活的tab栏的名字
      activeName: 'one0',
      form: {
        // 商品名称
        goods_name: '',
        // 分类列表 =》 点击后进行保存数据
        goods_cat: [],
        // 价格
        goods_price: '',
        // 数量
        goods_number: '',
        // 重量
        goods_weight: '',
        // 介绍
        goods_introduce: '',
        // 上传的图片
        pics: []

      },
      // 下拉菜单选中保存的数据
      options: [],
      // 下拉菜单配置
      props: {
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      },
      // 上传图片的请求头 =》 需要带 token 过去
      headers: {
        Authorization: localStorage.getItem('token')
      },
      dialogVisible: false,
      imgUrl: '',
      // 表单校验
      rules: {
        goods_price: [
          { pattern: /^([1-9]\d{0,1}|10)$/, message: '请输入商品价格', trigger: ['blur', 'change'] }
        ],
        goods_weight: [
          { pattern: /^([1-9]\d{0,1}|10)$/, message: '请输入商品重量', trigger: ['blur', 'change'] }
        ],
        goods_number: [
          { pattern: /^([1-9]\d{0,1}|10)$/, message: '请输入商品数量', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  async created () {
    // 获取商品数据
    const { meta, data } = await this.$axios.get(`categories?type=3`)
    if (meta.status === 200) {
      this.options = data
    }
  },
  methods: {
    // 点击下面步骤切换上面的步骤
    handleClick (tab) {
      this.active = +tab.index
    },

    // 下一步进行切换对应的tab栏显示
    async next () {
      try {
        // 表单校验
        await this.$refs.form.validate()
        this.active++
        this.activeName = 'one' + this.active
      } catch (e) {
        console.log(e)
      }
    },

    // 文件上传成功时的钩子
    handleSucces (response, file, fileList) {
      const { meta, data } = response
      if (meta.status === 200) {
        this.form.pics.push({
          pic: data.tmp_path
        })
      }
    },

    // 上传文件之前的钩子
    handleBefore (file) {
      const isGif = file.type === 'image/png'
      const isLimit = file.size / 1024 / 1024 < 2
      if (!isGif) {
        this.$message.error('只能上传png格式的图片')
      }
      if (!isLimit) {
        this.$message.error('上传图片必须小于2MB')
      }
      return isGif && isLimit
    },

    // 文件列表移除文件时的钩子
    handleRemove (file, fileList) {
      console.log(file)
      // 根据file获取到临时路径
      const path = file.response.data.tmp_path
      // 把pics中对应path的那个对象给删除
      this.form.pics = this.form.pics.filter(item => item.pic !== path)
    },

    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview (file) {
      // 隐藏对话框
      this.dialogVisible = true
      this.imgUrl = file.url
    },

    // 添加商品
    async addNext () {
      try {
        const res = await this.$axios.post(`goods`, {
          ...this.form,
          // 修改 goods_cat 跟后台需要的值一致
          goods_cat: this.form.goods_cat.join()
        })
        const { meta } = res
        if (meta.status === 201) {
          this.$message.success(meta.msg)
          this.$router.push({ path: '/goods' })
        } else {
          this.$message.error(meta.msg)
        }
      } catch (e) {
        this.$message.error(e)
      }
    }
  }
}
</script>

<!--如何把样式渗透到子组件 深度选择器-->
<!--css >>>  less /deep/  sass ::v-deep-->
<style scoped lang="less">
  .quill-editor {
    background-color: #fff;
    /deep/ .ql-editor {
      height: 300px;
    }
  }
</style>
